<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Page | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Page</h1>
          <ul class="docs-index"></ul>
          <p>Page is one of the main components (containers) used to display app content.</p>
          <h2>Page Layout</h2><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    ... scrollable page content goes here ...
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
          <h3>Page Name</h3>
          <p>As you may note, each page has a <code>data-name</code> attribute with a unique page name. It's not required but can be useful within "page events" or "page callbacks". It can help us to define which page is loaded and available so you can make required manipulations to the page.</p>
          <h3>Page Content</h3>
          <p>All visual content (like list views, forms, etc.) should put inside of <code>&lt;div class="page-content"&gt;</code> which should be a child of <code>&lt;div class="page"&gt;</code>. It's required for correct styling, layout and scrolling.</p>
          <h2>Page Events</h2>
          <p>Now lets look at one of the most important parts of page navigation, "page events". <b>Page Events</b> allow us to manipulate just loaded pages by executing JavaScript for those specific pages:</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>page:mounted</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered when new page just inserted to DOM. Or when page with <code>keepAlive</code> route is mounted/attached to DOM</td>
              </tr>
              <tr>
                <td>page:init</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered after Framework7 initialize required page's components and navbar</td>
              </tr>
              <tr>
                <td>page:reinit</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>This event will be triggered in case of navigating to the page that was already initialized.</td>
              </tr>
              <tr>
                <td>page:beforein</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)</td>
              </tr>
              <tr>
                <td>page:afterin</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered after page transitioned into view</td>
              </tr>
              <tr>
                <td>page:beforeout</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered right before page is going to be transitioned out of view</td>
              </tr>
              <tr>
                <td>page:afterout</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered after page transitioned out of view</td>
              </tr>
              <tr>
                <td>page:beforeunmount</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered when page with <code>keepAlive</code> route is going to be unmounted/detached from DOM</td>
              </tr>
              <tr>
                <td>page:beforeremove</td>
                <td>Page Element<span>&lt;div class="page"&gt;</span></td>
                <td>Event will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory. This event won't be triggered for <code>keepAlive</code> routes.</td>
              </tr>
            </tbody>
          </table>
          <p>Lets see how we can use these events. There are two ways to add page event handlers:</p><pre><code class="js"><span class="token comment">// Option 1. Using one 'page:init' handler for all pages</span>
<span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'page:init'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// Do something here when page loaded and initialized</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// Option 2. Using live 'page:init' event handlers for each page</span>
<span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'page:init'</span><span class="token punctuation">,</span> <span class="token string">'.page[data-name="about"]'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// Do something here when page with data-name="about" attribute loaded and initialized</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <h2>Page Loading Sequence Classes</h2>
          <p>When a new page is loading and transitioned into the view (main visible part of the app) it has different classes on page element.</p>
          <p>When we load/open new page the following happens:</p>
          <ol>
            <li>Currently active page has <code><b>page-current</b></code> class.</li>
            <li>If page we load not in DOM (e.g. loaded via Ajax or using template or from component) it will be added to DOM.</li>
            <li>Page that we load/open will have additional <code><b>page-next</b></code> class set on its element.</li>
            <li>Router element (<code>&lt;div class="view"&gt;</code>) will have additional <code><b>router-transition-forward</b></code> class that does the following:
              <ul>
                <li>page with <code>page-next</code> (new page) class moves into the view</li>
                <li>page with <code>page-current</code> (current page) class moves out of the view</li>
              </ul>
            </li>
            <li>After transition completed, the new page that we loaded will have <code><b>page-current</b></code> class</li>
            <li>And the page that was previously active will have <code><b>page-previous</b></code> class</li>
          </ol>
          <p>When we load/open previous page (go back) the following happens:</p>
          <ol>
            <li>Currently active page has <code><b>page-current</b></code> class.</li>
            <li>If page we go back to not in DOM (e.g. loaded via Ajax or using template or from component) it will be added to DOM.</li>
            <li>Page that we go back to will have additional <code><b>page-previous</b></code> class set on its element.</li>
            <li>Router element (<code>&lt;div class="view"&gt;</code>) will have additional <code><b>router-transition-backward</b></code> class that does the following:
              <ul>
                <li>page with <code>page-previous</code> (page that we go back to) class moves into the view</li>
                <li>page with <code>page-current</code> (current page) class moves out of the view</li>
              </ul>
            </li>
            <li>After transition completed, the new page that we returned to will have <code><b>page-current</b></code> class</li>
            <li>And the page that was previously active will have <code><b>page-next</b></code> class. In case this page was added to DOM dynamically, it will be removed from DOM.</li>
          </ol>
          <h2>Page Data</h2>
          <p>As you may see it is pretty easy, but how do you determine which page is loaded when we use only one handler? For this case we have Page Data in the event details:</p><pre><code class="js"><span class="token comment">// In page events:</span>
<span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'page:init'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// Page Data contains all required information about loaded and initialized page</span>
  <span class="token keyword">var</span> page <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>Or in case the event handler was assigned using Dom7 like in example above then it will be passed in second argument:</p><pre><code class="js"><span class="token comment">// In page events:</span>
<span class="token function">$$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'page:init'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>Now, in the example above we have page data in <code><b>page</b></code> variable. It is an object with the following properties:</p>
          <table class="methods-table">
            <thead>
              <tr>
                <td colspan="3"></td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>page.app</td>
                <td><span class="parameter-type">object</span></td>
                <td>Initialized app instance</td>
              </tr>
              <tr>
                <td>page.view</td>
                <td><span class="parameter-type">object</span></td>
                <td>View instance that contains this page (if this View was initialized)</td>
              </tr>
              <tr>
                <td>page.router</td>
                <td><span class="parameter-type">object</span></td>
                <td>Router instance that contains this page (if this View was initialized). Same as <code>page.view.router</code></td>
              </tr>
              <tr>
                <td>page.app</td>
                <td><span class="parameter-type">string</span></td>
                <td>Initialized app instance</td>
              </tr>
              <tr>
                <td>page.name</td>
                <td><span class="parameter-type">string</span></td>
                <td>Value of page's <code>data-name</code> attribute</td>
              </tr>
              <tr>
                <td>page.el</td>
                <td><span class="parameter-type">HTMLElement</span></td>
                <td>Page element</td>
              </tr>
              <tr>
                <td>page.$el</td>
                <td><span class="parameter-type">object</span></td>
                <td>Dom7 instance with Page element</td>
              </tr>
              <tr>
                <td>page.navbarEl</td>
                <td><span class="parameter-type">HTMLElement</span></td>
                <td>Related navbar element for this page. Available only in iOS theme with dynamic navbar enabled.</td>
              </tr>
              <tr>
                <td>page.$navbarEl</td>
                <td><span class="parameter-type">object</span></td>
                <td>Dom7 instance with related navbar element for this page. Available only in iOS theme with dynamic navbar enabled.</td>
              </tr>
              <tr>
                <td>page.from</td>
                <td><span class="parameter-type">string</span></td>
                <td>Page position before transition or direction of where this Page comes from. It will be <code>next</code> if you load new page, <code>previous</code> - if you go back to this page, or <code>current</code> if this page replaces the currently active one.</td>
              </tr>
              <tr>
                <td>page.to</td>
                <td><span class="parameter-type">string</span></td>
                <td>New page position or where this page goes to. Can be same <code>next</code>, <code>previous</code> or <code>current</code></td>
              </tr>
              <tr>
                <td>page.position</td>
                <td><span class="parameter-type">string</span></td>
                <td>Alias for <code>page.from</code></td>
              </tr>
              <tr>
                <td>page.direction</td>
                <td><span class="parameter-type">string</span></td>
                <td>Direction of page transition (if applicable). Can be <code>forward</code> or <code>backward</code></td>
              </tr>
              <tr>
                <td>page.route</td>
                <td><span class="parameter-type">object</span></td>
                <td>Route associated with this page, object with current route data that was used to load this page. It has the following properties
                  <ul>
                    <li><code>url</code> - route URL</li>
                    <li><code>path</code> - route path</li>
                    <li><code>query</code> - object with route query. If the url is <code>/page/?id=5&foo=bar</code> then it will contain the following object <code>{id: '5', foo: 'bar'}</code></li>
                    <li><code>params</code> - route params. If we have matching route with <code>/page/user/:userId/post/:postId/</code> path and url of the page is <code>/page/user/55/post/12/</code> then it will be the following object <code>{userId: '55', postId: '12'}</code></li>
                    <li><code>name</code> - route name</li>
                    <li><code>hash</code> - route URL hash</li>
                    <li><code>route</code> - object with matching route from available routes</li>
                    <li><code>context</code> - context that was passed to the route</li>
                  </ul>
                </td>
              </tr>
              <tr>
                <td>page.pageFrom</td>
                <td><span class="parameter-type">object</span></td>
                <td>Page data of the page that was currently active before this new page.</td>
              </tr>
              <tr>
                <td>page.context</td>
                <td><span class="parameter-type">object</span></td>
                <td>Template7 context that was passed for this page when using Template7 pages</td>
              </tr>
            </tbody>
          </table>
          <h2>Access To Page Data</h2>
          <p>If you don't use page events/callbacks and need to access to page data, it is possible via the <code>f7Page</code> property on its HTMLElement:</p><pre><code class="js"><span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>

<span class="token keyword">var</span> page <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.page[data-name="somepage"]'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>f7Page<span class="token punctuation">;</span>

<span class="token comment">// do something with page data</span></pre></code>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>